<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>用户中心- 外咖APP任务发布平台</title>
<link rel="shortcut icon" href="/static/img/favicon.ico"
	type="image/x-icon" />
<link rel="stylesheet" href="/static/layui/css/layui.css" />
<link rel="stylesheet" href="/static/css/register.css">
</head>
<body style="overflow: hidden;">
	<form class="layui-form"
		style="width: 48%; margin: 5% auto; font-size: 16px;">
		<div class="user_left" style="padding: 20px;">
			<fieldset class="layui-elem-field">
				<legend
					style="font-size: 30px; text-align: center; font-weight: bold;">基本信息</legend>
				<div class="layui-field-box">
					<div class="layui-form-item">
						<label class="layui-form-label">用户头像：</label>
						<div class="layui-input-block">
							<img alt="头像" class="layui-circle" src="${secuser.HeadImgUrl }"
								id="headImage"
								style="width: 88px; height: 88px; margin-top: 10px;" />
							<button type="button" class="layui-btn layui-btn-primary"
								id="img-upload" style="margin-left: 10%;">
								<i class="layui-icon">&#xe67c;</i> 上传图片
							</button>
						</div>
					</div>
					<hr />
					<div class="layui-form-item">
						<label class="layui-form-label">用户昵称：</label>
						<div class="layui-input-block">
							<input type="text" id="user-name" placeholder="请输入用户名"
								value="${secuser.UserName}" maxlength="8" lay-verify="required"
								class="layui-input">
						</div>
					</div>
					<hr />
					<div class="layui-form-item">
						<label class="layui-form-label">手机号码：</label>
						<div class="layui-input-block">
							<input id="input-phone" type="tel" placeholder="请输入手机号码"
								class="layui-input layui-disabled" disabled> <span
								style="position: absolute; right: 0px; top: 0px;">
								<button id="btnTelChange" class="layui-btn layui-btn-primary">更换手机号码</button>
							</span>
						</div>
					</div>
					<hr />
					<div class="layui-form-item">
						<label class="layui-form-label">电子邮箱：</label>
						<div class="layui-input-block">
							<input type="text" placeholder="请输入邮箱" id="input-email"
								class="layui-input layui-disabled" disabled> <span
								style="position: absolute; right: 0px; top: 0px;">
								<button id="btnEmailChange" class="layui-btn layui-btn-primary">更换电子邮箱</button>
							</span>
						</div>
					</div>
				</div>
				<div class="layui-form-item" style="margin-left: 4%;">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="changeUser">立即提交</button>
					</div>
				</div>
			</fieldset>
		</div>
	</form>

	<!--
        	作者：Luyao
        	时间：2017-11-21
        	描述：修改手机号码弹窗
        -->
	<div id="changePhoneDiv"
		style="width: 350px; text-align: center; font-size: 16px; display: none;">
		<form class="layui-form" style="padding: 20px;">
			<fieldset class="layui-form-item layui-field-title">
				<legend
					style="font-size: 20px; text-align: center; font-weight: bold;">修改手机号码</legend>
			</fieldset>
			<div id="update-phone-before">
				<div class="layui-form-item">
					<label class="layui-form-label">当前手机：</label>
					<div class="layui-input-block">
						<div class="layui-form-label" id="currentPhone"></div>
					</div>
				</div>
				<div class="layui-form-item form_code">
					<input class="layui-input" id="old-msg-code" placeholder="请输入短信验证码"
						type="text" maxlength="6" lay-verify="required|number">
					<div class="code">
						<button class="layui-btn layui-btn-normal oldPhoneCode-btn"
							style="width: 120px;">获取验证码</button>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block" style="float: right;">
						<button class="layui-btn" id="update-next-btn">下一步</button>
					</div>
				</div>
			</div>
			<div id="update-phone-last" style="display: none;">
				<div class="layui-form-item">
					<label class="layui-form-label">新手机号：</label>
					<div class="layui-input-block">
						<input type="text" id="newPhone" placeholder="请输入新手机号码"
							maxlength="11" lay-verify="required|phone" class="layui-input">
					</div>
				</div>
				<hr />
				<div class="layui-form-item form_code">
					<input class="layui-input" id="new-msg-code" placeholder="请输入短信验证码"
						type="text" maxlength="6" lay-verify="required|number">
					<div class="code">
						<button class="layui-btn layui-btn-normal newPhoneCode-btn"
							style="width: 120px;">获取验证码</button>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="changePhone">保存修改</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</div>
		</form>
	</div>

	<!--
        	作者：1912525497@qq.com
        	时间：2017-11-21
        	描述：修改邮箱弹窗
        -->
	<div id="changeEmailDiv"
		style="width: 350px; text-align: center; font-size: 16px; display: none;">
		<form class="layui-form" style="padding: 20px;">
			<fieldset class="layui-form-item layui-field-title">
				<legend
					style="font-size: 20px; text-align: center; font-weight: bold;">修改邮箱</legend>
			</fieldset>
			<div class="layui-form-item">
				<label class="layui-form-label">邮箱地址：</label>
				<div class="layui-input-block">
					<input type="email" id="newEmail" placeholder="请输入邮箱地址"
						lay-verify="required|email" class="layui-input">
				</div>
			</div>
			<hr />
			<div class="layui-form-item form_code">
				<input class="layui-input" id="email-code" placeholder="请输入邮箱验证码"
					type="text" maxlength="6" lay-verify="required|number">
				<div class="code">
					<button class="layui-btn layui-btn-normal emailCode-btn"
						style="width: 120px;">获取验证码</button>
				</div>
			</div>
			<hr />
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="changeEmail">保存修改</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>

	<script type="text/javascript"
		src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="/static/layui/layui.all.js"></script>
	<script type="text/javascript" src="/static/js/userInfo.js"></script>
	<script type="text/javascript">
		$(function() {
			var phone = "${secuser.Phone}".substring(0, 3) + "****" + "${secuser.Phone}".substring("${secuser.Phone}".length - 3);
			$("#input-phone").val(phone);
			$("#currentPhone").html(phone);
	
			var email = "${secuser.Email}";
			if (email != "" && email != null) {
				email = email.substring(0, 3) + "****" + email.substring(email.indexOf("@"), email.length);
				$("#input-email").val(email);
			}
		});
	</script>
</body>
</html>